	page {
		height: 100%;
	}
	.chatInterface{
		height: 100%;
		/* background-color: #e9e9e9; */
	}
	.chatInterface .scroll-view{
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 140rpx;
		/* background-color: #e9e9e9; */
	}
	.chatInterface .scroll-view .all-history-loaded{
		font-size: 24rpx;
		height: 150rpx;
		line-height: 130rpx;
		width: 100%;
		text-align: center;
		color: grey;
		margin-top:100rpx ;
	}

	.chatInterface .scroll-view .message-item{
		display: flex;
		margin: 20rpx 0;
	}
	.chatInterface .scroll-view .message-item .message-item-checkbox {
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.chatInterface .scroll-view .message-item .message-item-content {
		flex: 1;
		overflow: hidden;
		display: flex;
	}
	.chatInterface .scroll-view .message-item .message-item-content.self{
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
		flex-direction: row-reverse;
	}
	.message-item-content .self .text-content {
		color: #FFFFFF !important;
		background: #618DFF !important;
		font-style: normal;
	}
	.message-item-content .self .audio-facade{
		flex-direction: row-reverse;
		color: #FFFFFF !important;
		background: #618DFF !important;
	}
	.message-item-content.self .audio-facade-bg {
		background: url("@/static/images/voice-self.png") no-repeat center;
		background-size: 30rpx;
		width: 40rpx;
	}
	.message-item-content.self .audio-facade-bg.play-icon {
		background: url("@/static/images/play-self.gif") no-repeat center;
		background-size: 40rpx;
	}
	.chatInterface .scroll-view .message-item .avatar{
		width: 80rpx;
		height: 80rpx;
		flex-shrink: 0;
		flex-grow: 0;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.chatInterface .scroll-view .message-item .avatar image{
		width: 100%;
		height: 100%;
	}

	.chatInterface .scroll-view .content{
		font-size: 34rpx;
		line-height: 44rpx;
		margin: 0 20rpx;
		max-width: 520rpx;
	}
	.chatInterface .scroll-view .content .message-payload{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		font-style: normal;
		position: relative;
	}
	.chatInterface .scroll-view .content .message-payload.self{
		background-color: #618DFF !important;
		color: #fff;
	}
	.chatInterface .scroll-view .content .message-payload.leftsj::after{
		content: "";
		position: absolute;
		left: -25rpx;
		top:20rpx;
		display:block;
		width:0px;
		height:0px;
		border-top:15rpx solid rgba(0,0,0,0);
		border-bottom:15rpx solid rgba(0,0,0,0);
		border-right:15rpx solid #fff;
		border-left:15rpx solid rgba(0,0,0,0);
		background-color:none;
	}
	.chatInterface .scroll-view .content .message-payload.rightsj::after{
		content: "";
		position: absolute;
		right: -25rpx;
		top:20rpx;
		display:block;
		width:0px;
		height:0px;
		border-top:15rpx solid rgba(0,0,0,0);
		border-bottom:15rpx solid rgba(0,0,0,0);
		border-left:15rpx solid #618DFF;
		border-right:15rpx solid rgba(0,0,0,0);
		background-color:none;
	}
	.chatInterface .scroll-view .content .image-content{
		border-radius: 12rpx;
		width: 300rpx;
		height: 300rpx;
	}
	.chatInterface .scroll-view .content .text-content{
		padding: 16rpx;
		border-radius: 12rpx;
		color: #000000;
		background: #FFFFFF;
		word-break: break-all;
		text-align: left;
		vertical-align: center;
		display: block;
		font-style: normal;
	}
	.chatInterface .scroll-view .content .text-content img{
		width: 50rpx;
		height: 50rpx;
	}

    .chatInterface .scroll-view .content .file-content {
        width: 560rpx;
        height: 152rpx;
        font-size: 28rpx;
        background: white;
        display: flex;
		align-items: center;
        border-radius: 10rpx;
		padding: 0 20rpx;
    }

    .chatInterface .scroll-view .content .file-content .file-info {
		width: 424rpx;
		height: 132rpx;
		padding: 12rpx 0;
    }

    .chatInterface .scroll-view .content .file-content .file-info .file-name {
        width: 420rpxrpx;
		font-size: 13px;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
    }
    .chatInterface .scroll-view .content .file-content .file-info .file-size {
        width: 200rpx;
        font-size: 24rpx;
        color: #ccc;
    }
    .chatInterface .scroll-view .content .file-content .file-img {
        width: 50rpx;
        height: 50rpx;
    }

    .chatInterface .scroll-view .content .pending{
		background: url("@/static/images/pending.gif") no-repeat center;
		background-size: 30rpx;
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.chatInterface .scroll-view .content .send-fail{
		background: url("@/static/images/failed.png") no-repeat center;
		background-size: 30rpx;
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.chatInterface .action-box{
		display: flex;
		backdrop-filter: blur(0.27rpx);
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		flex-direction: column;
		background-color: #FFFFFF;
	}
	.chatInterface .action-box .action-top{
		display: flex;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		backdrop-filter: blur(0.27rem);
		min-height: 100rpx;
		background:#FAFAFA;
		width: 100%;
		max-height: 300rpx;
	}
	.chatInterface .action-box .action-top .record-icon{
		font-size: 32rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: url("@/static/images/record-appearance-icon.png") no-repeat center;
		background-size: 50%;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	.chatInterface .action-box .action-top .file-icon{
		background: url("@/static/images/video.png") no-repeat center;
		background-size: 70%;
		color: #9D9D9D;
		position: relative;
		width:80rpx;
		height: 80rpx;
		line-height: 80rpx;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	.chatInterface .action-box .record-icon.record-open{
		background: url("@/static/images/jianpan.png") no-repeat center;
		background-size: 70%;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	.chatInterface .action-box .action-top .img-video{
		background: url("@/static/images/file.png") no-repeat center;
		background-size: 73%;
	}
	.chatInterface .action-box .action-top .emoji-icon{
		background: url("@/static/images/emoji.png") no-repeat center;
		background-size: 60%;
	}
	.chatInterface .action-box .action-top .more-icon{
		background: url("@/static/images/more.png") no-repeat center;
		background-size: 70%;
	}
	.chatInterface .action-box .action-bottom .more-item{
		display: flex;
		flex-direction: column;
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		align-items: center;
	}
	.chatInterface .action-box .action-bottom .more-item image{
		height: 100rpx;
		width: 100rpx;
	}
	.chatInterface .action-box .action-bottom .more-item text{
		font-size: 20rpx;
		text-align: center;
		line-height: 50rpx;
	}
	.chatInterface .action-box .action-top .record-input{
		width: 460rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		background: #cccccc;
		color: #ffffff;
		text-align: center;
	}
	.chatInterface .action-box .action-top .message-input{
		border-radius: 12rpx;
		background: #EFEFEF;
		/* height: 80rpx; */
		width: 60%;
		overflow: auto;
		margin-bottom: 25rpx;
	}
	.chatInterface .action-box .action-top .message-input input{
		width: 420rpx;
		min-height: 80rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
	}
	.chatInterface .action-box .action-top .message-input textarea{
		width: 380rpx;
		/* line-height: 80rpx; */
		padding:20rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
		max-height: 100rpx;
		
	}
	.chatInterface .action-box .action-top .send-message-btn{
		font-size: 30rpx;
		width: 80rpx;
		line-height: 80rpx;
		color:#82868E ;
	}
	.chatInterface .action-bottom{
		height: 300rpx;
		width:100%;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.action-flex{
		display: flex;		
	}
	.chatInterface .action-bottom-emoji{
		justify-content: space-around;
	}

	.chatInterface .action-bottom image{
		width:100rpx;
		height: 100rpx;
	}

	.chatInterface .messageSelector-box{
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(0.27rpx);
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		border-radius: 12rpx;
		background: #EFEFEF;
		height: 80rpx;
		padding: 20rpx 0;
		font-size: 32rpx;
	}

	.chatInterface .messageSelector-box .messageSelector-btn {
		width: 80rpx;
		height: 80rpx;
	}

	uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
	    border-color: #d1d1d1 !important;
	}

	uni-checkbox .uni-checkbox-input {
		border-radius: 50% !important;
	}

	/* #ifdef MP-WEIXIN */
	checkbox .wx-checkbox-input {
		border-radius: 50% !important;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #007aff !important;
	}
	/* #endif */

	.chatInterface .action-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.chatInterface .action-popup .layer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(51, 51, 51, 0.5);
		z-index: 999;
	}
	.chatInterface .action-popup .action-box {
		width: 350rpx;
		background: #434343;
		position: relative;
		z-index: 1000;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.chatInterface .action-popup .action-item {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		color: #ffffff;
		border-bottom: 1px solid #EFEFEF;
	}
	.chatInterface .action-popup .action-item:last-child {
		border: none;
	}
	.chatInterface .record-loading{
		position: fixed;
		top:50%;
		left: 50%;
		width: 300rpx;
		height: 300rpx;
		margin: -150rpx -150rpx;
		background: #262628;
		background: url("@/static/images/recording-loading.gif") no-repeat center;
		background-size: 100%;
		border-radius: 40rpx;
	}
	.chatInterface .img-layer{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000000;
		z-index: 9999;
		padding: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.chatInterface .img-layer uni-image {
		height: 100%!important;
	}
	.chatInterface .img-layer {
		height: 100%!important;
		width: 100%!important;
	}

	.chatInterface .video-snapshot{
		position: relative;
		height: 300rpx;
		max-width: 400rpx;
		background: #000000;
	}
	.chatInterface .video-snapshot image{
		max-height: 300rpx;
		max-width: 400rpx;
	}
	.chatInterface .video-snapshot video{
		max-height: 300rpx;
		max-width: 400rpx;
	}

	.chatInterface .video-snapshot .video-play-icon{
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background:url("@/static/images/play.png") no-repeat center;
		background-size: 100%;
		top:50%;
		left: 50%;
		margin:-20rpx;
	}

	.chatInterface .group-icon{
		right: 20rpx;
		width: 60rpx;
		height: 60rpx;
		top:14rpx;
		position: fixed;
		right: 20rpx;
		top:120rpx;
		background-color: #C4C4C4;
		z-index: 2;
		border-radius: 60rpx;
	}
	.uni-toast{
		background-color: #ffffff!important;
	}
	.time-lag{
		font-size: 20rpx;
		text-align: center;
	}
	.chatInterface .custom-message{
		width: 400rpx;
		height: 260rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		border: 1px solid rgba(0, 0, 0, 0.05);
		box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.chatInterface .custom-message .title{
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 30rpx;
	}
	.chatInterface .custom-message .title image{
		width: 40rpx;
		height: 40rpx;
	}
	.chatInterface .custom-message .custom-message-item{
		text-align: left;
		font-size: 28rpx;
		overflow: hidden;
		width: 100%;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.message-read {
		color: grey;
		font-size: 24rpx;
		text-align: end;
		height: 36rpx;
	}

	.message-unread {
		color: #618DFF;
		font-size: 24rpx;
		text-align: end;
		height: 36rpx;
	}

	.message-recalled {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 56rpx;
		font-size: 26rpx;
		text-align: center;
		color: grey;
	}

	.message-recalled .message-recalled-self {
		display: flex;
	}

	.message-recalled .message-recalled-self span {
		margin-left: 10rpx;
		color: #618DFF;
	}
